<template>
  <div class='bg-white dark:bg-zinc-900 xl:dark:bg-zinc-800 rounded-sm pb-1'>
    <div class='relative w-full rounded-sm cursor-zoom-in group'
         :style='{
            backgroundColor:randomRGB()
         }'
    >
      <!-- 图片 -->
      <img class='w-full rounded-sm bg-transparent' alt='' :src='data.photo' :style='{
          height:(width / data.photoWidth) * data.photoHeight + "px"
        }' />
    </div>
    <p class='text-xs font-normal font-mono mt-0.5 text-zinc-900 dark:text-zinc-300 line-clamp-2 px-0.5'>
      {{ data.title }}
    </p>
    <div class='flex items-center mt-0.5 px-0.5'>
      <img class='h-2 w-2 rounded-full' :src='data.avatar' alt='' />
      <span class='text-xs text-zinc-500 ml-0.5 line-clamp-2'>{{ data.author }}</span>
    </div>
  </div>
</template>
<script setup>
import { randomRGB } from '@/utils/color'

defineProps({
  data: {
    type: Object,
    required: true
  },
  width: {
    type: Number
  }
})
</script>

<style lang='scss'>

</style>
